<?php
$path = Yii::app()->request->baseUrl . '/';
?>
<link rel="stylesheet" href="<?php echo $path ?>css/admin/slide.css" type="text/css">
<script type="text/javascript" src="<?php echo $path ?>js/jquery/jquery.min.js"></script>
<div id='wrapper'>
    <div id='body'>
        <?php if (count($productImages) > 0) { ?>
            <div id="bigPic">
                <?php foreach ($productImages as $productImage): ?>
                    <?php echo CHtml::image($path . $productImage->path, '#', array('width' => 430, 'height' => 430)); ?>
                <?php endforeach; ?>
            </div>
            <ul id="thumbs">
                <?php
                $index = 0;
                foreach ($productImages as $productImage):
                    $index++;
                    ?>
                    <?php if ($index == 1) { ?>
                        <li class='active' rel='<?php echo $index ?>'><?php echo CHtml::image($path . $productImage->path, '#', array('width' => 30, 'height' => 40)); ?></li>
                    <?php } else { ?>
                        <li rel='<?php echo $index ?>'><?php echo CHtml::image($path . $productImage->path, '#', array('width' => 30, 'height' => 40)); ?></li>
                    <?php } ?>
                <?php endforeach; ?>
            </ul>
        <?php } else { ?>
            <h2><font style="color: #0066A4;">Không có hình ảnh nào</font></h2>
            <?php } ?>
    </div>
</div>
<script type="text/javascript">
    var currentImage;
    var currentIndex = -1;
    var interval;
    function showImage(index){
        if(index < $('#bigPic img').length){
            var indexImage = $('#bigPic img')[index]
            if(currentImage){   
                if(currentImage != indexImage ){
                    $(currentImage).css('z-index',2);
                    clearTimeout(myTimer);
                    $(currentImage).fadeOut(250, function() {
                        myTimer = setTimeout("showNext()", 3000);
                        $(this).css({'display':'none','z-index':1})
                    });
                }
            }
            $(indexImage).css({'display':'block', 'opacity':1});
            currentImage = indexImage;
            currentIndex = index;
            $('#thumbs li').removeClass('active');
            $($('#thumbs li')[index]).addClass('active');
        }
    }
    function showNext(){
        var len = $('#bigPic img').length;
        var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
        showImage(next);
    } 
    var myTimer;  
    $(document).ready(function() {
        myTimer = setTimeout("showNext()", 3000);
        showNext(); //loads first image
        $('#thumbs li').bind('click',function(e){
            var count = $(this).attr('rel');
            showImage(parseInt(count)-1);
        });
    });
</script>
